<!--src/views/dashboard/Home.vue-->
<template>
  <main class="dashboard">
    <div class="carousel-container">
      <div class="progress-bar" :style="{ width: progressWidth }"></div>
      <div class="carousel-track" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
        <div v-for="(slide, index) in carouselData" :key="index" class="carousel-slide">
          <img :src="slide.src" :alt="slide.alt">
        </div>
      </div>

      <button class="prev-btn" @click="prevSlide">❮❮</button>
      <button class="next-btn" @click="nextSlide">❯❯</button>

      <div class="indicators">
        <div
            v-for="(slide, index) in carouselData"
            :key="index"
            class="indicator"
            :class="{ active: currentIndex === index }"
            @click="goToSlide(index)"
        ></div>
      </div>

      <div class="caption">
        <h3>{{ carouselData[currentIndex].title }}</h3>
        <p>{{ carouselData[currentIndex].desc }}</p>
      </div>

      <div class="auto-play-control" @click="toggleAutoPlay">
        <span>{{ isPlaying ? '暂停轮播' : '播放轮播' }}</span>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import '@/styles/home.css'

// 图片数据
const carouselData = ref([
  {
    src: "https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=1200&q=80",
    alt: "山脉风景",
    title: "雄伟的山脉",
    desc: "晨曦中的高山峻岭，云雾缭绕如仙境般壮丽"
  },
  {
    src: "https://images.unsplash.com/photo-1433838552652-f9a46b332c40?auto=format&fit=crop&w=1200&q=80",
    alt: "海滩日落",
    title: "金色沙滩",
    desc: "夕阳下的海滩，波浪轻拍沙滩，海天一线如画卷"
  },
  {
    src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1200&q=80",
    alt: "湖泊与森林",
    title: "静谧湖泊",
    desc: "清澈见底的湖面倒映着周围森林的翠绿轮廓"
  },
  {
    src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1200&q=80",
    alt: "自然山脉",
    title: "绝美峰峦",
    desc: "延绵不绝的山脉在黄昏的映衬下更显雄壮"
  }
]);

// 当前索引
const currentIndex = ref(0);

// 自动播放状态
const isPlaying = ref(true);

// 进度条宽度
const progressWidth = ref('0%');

// 存储定时器ID
let intervalId = null;
let progressIntervalId = null;
const SLIDE_DURATION = 5000; // 每张幻灯片持续时间5秒

// 切换到特定幻灯片
const goToSlide = (index) => {
  currentIndex.value = index;
  resetProgressBar();
};

// 下一张幻灯片
const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % carouselData.value.length;
  resetProgressBar();
};

// 上一张幻灯片
const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + carouselData.value.length) % carouselData.value.length;
  resetProgressBar();
};

// 开始自动播放
const startAutoPlay = () => {
  if (intervalId) clearInterval(intervalId);
  if (progressIntervalId) clearInterval(progressIntervalId);

  intervalId = setInterval(() => {
    if (isPlaying.value) {
      nextSlide();
    }
  }, SLIDE_DURATION);

  isPlaying.value = true;
  resetProgressBar();
};

// 暂停自动播放
const pauseAutoPlay = () => {
  if (intervalId) clearInterval(intervalId);
  if (progressIntervalId) clearInterval(progressIntervalId);

  isPlaying.value = false;
  progressWidth.value = '0%';
};

// 切换自动播放状态
const toggleAutoPlay = () => {
  if (isPlaying.value) {
    pauseAutoPlay();
  } else {
    startAutoPlay();
  }
};

// 重置进度条动画
const resetProgressBar = () => {
  if (!isPlaying.value) return;

  if (progressIntervalId) clearInterval(progressIntervalId);

  progressWidth.value = '0%';
  const startTime = Date.now();

  progressIntervalId = setInterval(() => {
    const elapsed = Date.now() - startTime;
    const progress = Math.min((elapsed / SLIDE_DURATION) * 100, 100);
    progressWidth.value = `${progress}%`;

    if (progress >= 100) {
      clearInterval(progressIntervalId);
    }
  }, 16); // 约60fps
};

// 组件挂载后开始自动播放
onMounted(() => {
  startAutoPlay();
});

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  if (intervalId) clearInterval(intervalId);
  if (progressIntervalId) clearInterval(progressIntervalId);
});
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  transition: all 0.3s ease;
}

.prev-btn:hover,
.next-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
}

.prev-btn {
  left: 20px;
}

.next-btn {
  right: 20px;
}
</style>